<template>
	<div class="recommend">
		<div class="recommend_top">
			<div class="recommend_top_title">
				人气名店
			</div>
			<div class="recommend_top_body">
				<!--<div class="recommend_top_body2 clear2" :style="{'width':imgHeightX+'px'}">
					<div class="recommend_top_img" :style="{'height':imgHeight+'px','width':imgHeight+'px','margin-right':imgMargin+'px'}">
						<img src="../../../../static/img/images/moren.jpg"  />
					</div>
					<div class="recommend_top_img" :style="{'height':imgHeight+'px','width':imgHeight+'px','margin-right':imgMargin+'px'}">
						<img src="../../../../static/img/images/moren.jpg"  />
					</div>
					<div class="recommend_top_img" :style="{'height':imgHeight+'px','width':imgHeight+'px','margin-right':imgMargin+'px'}">
						<img src="../../../../static/img/images/moren.jpg"  />
					</div>
					<div class="recommend_top_img" :style="{'height':imgHeight+'px','width':imgHeight+'px','margin-right':imgMargin+'px'}">
						<img src="../../../../static/img/images/moren.jpg"  />
					</div>
					<div class="recommend_top_img" :style="{'height':imgHeight+'px','width':imgHeight+'px','margin-right':imgMargin+'px'}">
						<img src="../../../../static/img/images/moren.jpg"  />
					</div>
					
				</div>-->
				<div class="zwcp" style="height: 4rem;line-height: 4rem;border: 0;">暂无名店商家</div>
			</div>
		</div>
		<div class="recommend_ss">
			<div  class="recommend_ss_input clear2">
				<input type="text" placeholder="输入品牌名/商品名" />
				<i class="el-icon-search"></i>
			</div>
			<span class="recommend_ss_leimu" @click="fl">分类</span>
			<div class="recommend_ss_guan">
				<div class="recommend_ss_guan2">
					<span @click="jump(key)" v-for="(data,key) in guan" class="recommend_ss_span" :class="key==guanI?'recommend_ss_spanactive':''">
						{{data.name}}
					</span>
				</div>
			</div>
		</div>
		<div class="recommend_body">
			<div class="recommend_body_top">
				<span>——————</span> {{guan[guanI].name}} <span>——————</span>
			</div>
			<div class="zwcp">暂无名店商家</div>
		</div>
		<div @click="close" v-show="show1" class="body_bac" :style="{'height':bodyHeight+'px'}"></div>
		<div :class="show2?'in':''" v-show="show1" class="body_leimu" :style="{'min-height':bodyHeight+'px'}" @click.stop="show1=true">
			<img src="../../../../static/img/images/leimu.jpg" />
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				imgHeight:0,
				imgHeightX:0,
				imgMargin:0,
				bodyHeight:0,
				guan:[{
					'name':'绅淑馆'
				},{
					'name':'婴幼馆'
				},{
					'name':'慈恩馆'
				},{
					'name':'生活馆'
				}],
				guanI:0,
				show1:false,
				show2:false,
			}
		},
		mounted() {
        	this.imgHeight=document.body.offsetWidth*0.95*0.32;
        	this.imgHeightX=document.body.offsetWidth*0.95*0.34*5;
        	this.imgMargin=document.body.offsetWidth*0.95*0.02;
        	this.bodyHeight=document.body.offsetHeight;
		},
		methods: {
			jump(key){
				this.guanI=key
			},
			fl(){
				this.show1=true;
				setTimeout(()=>{
					this.show2=true;
				},300)
			},
			close(){
				this.show2=false;
				setTimeout(()=>{
					this.show1=false;
				},300)
				
			}
		}
	}
</script>

<style scoped>
	.recommend_top{
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 2rem;
	}
	.recommend_top_title{
		width: 100%;
		font-size: 1.6rem;
		border-left: 0.6rem solid #000;
		color: #000;
		padding-left: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
		margin: 1.5rem 0;
		
	}
	.recommend_top_body{
		overflow: auto;
		width: 100%;
	}
	.recommend_top_body2{
	}
	.recommend_top_img{
		float: left;
		box-sizing: border-box;
		border: 1px solid #000;
	}
	.recommend_top_img:nth-last-child(1){
		margin: 0;
	}
	.recommend_top_img img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.recommend_ss{
		width: 95%;
		padding: 0 2.5%;
		background: #000;
		
	}
	.recommend_ss_input{
		float: left;
		width: 85%;
		background: #fff;
		height: 2.9rem;
		border-radius: 3rem;
		overflow: hidden;
		margin-top: 0.8rem;
	}
	.recommend_ss_input input{
		height: 2.9rem;
		text-indent: 10%;
		width: 80%;
		border: 0;
		font-size: 1.4rem;
		line-height: 2.9rem;
	}
	.recommend_ss_input i{
		font-size: 1.5rem;
		line-height: 2.9rem;
		float: right;
		margin-right: 7%;
	}
	.recommend_ss_leimu{
		font-size: 1.8rem;
		float: right;
		color: #edb53e;
		margin-top: 0.8rem;
		line-height: 2.9rem;
	}
	
	.recommend_ss_guan{
		clear: both;
		width: 100%;
		overflow: auto;
		
	}
	.recommend_ss_guan2{
		white-space: nowrap;
	}
	.recommend_ss_span{
		font-size: 1.6rem;
		color: #fff;
		display: inline-block;
		padding: 1.5rem 0;
		text-align: center;
		width: 25%;
		
	}
	.recommend_ss_spanactive{
		color: #edb53e;
	}
	.recommend_body{
		width: 95%;
		margin: 0 auto;
		margin-top: 0.8rem;
	}
	.recommend_body_top{
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		color: #808080;
	}
	.recommend_body_top span{
		color: #ccc;
	}
	.body_bac{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: rgba(0,0,0,0.5);
	}
	.body_leimu{
		width: 50%;
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 2;
		transform: translate(100%,0);
		transition: transform 0.3s;
	}
	.body_leimu img{
		width: 100%;
		display: block;
	}
	.in{
		transform: translate(0,0);
	}
	
</style>